<template>
  <div class="shopping">
    <div class="header">
      购物车
      <span class="bian" @click="chageDelate">{{!judge?'编辑':'完成'}}</span>
    </div>
    <div v-if="this.result.validShoppingCartDealerVos!=''">
      <div v-for="(item,index) in result.validShoppingCartDealerVos" :key="index" >
            <div class="header-1">
              <div class="header-1-left">
                <img
                  @click="getCheckState(!checkArr[index],skuIds[index])"
                  class="circle"
                  v-bind="{src:!checkArr[index]?require('../assets/4 (1).png'):require('../assets/4 (2).png')}"
                  alt
                >
                <div class="company">
                  <span>{{item.dealerName}}</span>
                  <i class="iconfont icon-right"></i>
                </div>
              </div>
              <span class="coupon">优惠券</span>
            </div>
            <div class="store">
              <div class="store-left">
                <div class="zeng">店铺满赠</div>
                <p>全场满购1111111111111111111111111111111111111111111111111111111111111111111111</p>
              </div>
              <dir class="store-right">
                <span>去凑单</span>
                <i class="iconfont icon-right"></i>
              </dir>
            </div>
            <div class="stores">
              <div class="store-left">
                <div class="zeng">满减</div>
                <p>全场满购1111111111111111111111111111111111111111111111111111111111111111111111</p>
              </div>
              <div class="store-right">
                <span>去凑单</span>
                <i class="iconfont icon-right"></i>
              </div>
            </div>
            <ul class="goods-list">
              <li v-for="(_item,_index) in item.groupGoodsVoList[0].shoppingCartGoodsResponseVo" :key="_index">
                <div class="goods-left">
                  <img
                    @click="getCheckState(!_item.choiceOrNo,_item.skuId)"
                    v-bind="{src:!_item.choiceOrNo?require('../assets/4 (1).png'):require('../assets/4 (2).png')}"
                    alt
                  >
                </div>
                <div class="goods-center">
                  <img :src="_item.picUrl" alt @click="Gotodetails(_item)">
                </div>
                <div class="goods-right">
                  <p @click="Gotodetails(_item)">{{_item.goodsName}}</p>
                  <span>{{_item.integerZeroConvert}}</span>
                  <div class="right-money">
                    <div class="money" @click="Gotodetails(_item)">
                      ￥
                      <span>{{_item.originalPrice|addZero}}</span>
                      <p class="sss">￥999.00</p>
                    </div>
                    <div class="number">
                      <span class="num">{{_item.secondQuantity}}</span>
                      <span class="zi">{{_item.secondUnit}}</span>
                      <span class="num">34</span>
                      <span class="zi">打</span>
                      <span class="num">{{_item.firstQuantity}}</span>
                      <span class="zi">{{_item.firstUnit}}</span>
                    </div>
                  </div>
                  <div class="right-bottom">
                    <p>{{_item.secondUnit}}</p>
                    <p class="da">打</p>
                    <p class="da">{{_item.firstUnit}}</p>
                    <div class="btn">
                      <button @click="count(index,_index)">+</button>
                      <div class="btn-z">{{_item.totalQuantity}}</div>
                      <button @click="counts(index,_index)">-</button>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <div class="gross">
              <div>
                <p class="gross-top">￥{{item.totalAmount|addZero}}</p>
                <p class="gross-bottom">已省:-￥{{item.savedAmount|addZero}}</p>
              </div>
            </div>
            <div class="close" v-if="!judge">
              <div class="close-left">
                <img
                  @click="getCheckState(!checkAll,clickAll)"
                  v-bind="{src:!checkAll?require('../assets/4 (1).png'):require('../assets/4 (2).png')}"
                  alt
                >
                <span class="xuan">全选</span>
                <div class="add">
                  <span class="add-sp">合计:￥{{result.totalAmount|addZero}}</span>
                  <p>已省:-￥{{result.savedAmount|addZero}}</p>
                </div>
              </div>
              <div class="close-right" @click="togo" v-if="result.totalAmount>90">去结算</div>
              <div class="close-right qipei" v-else>￥99.00起配</div>
            </div>
            <div class="close" v-else>
              <div class="close-left">
                <img
                  @click="getCheckState(!checkAll,clickAll)"
                  v-bind="{src:!checkAll?require('../assets/4 (1).png'):require('../assets/4 (2).png')}"
                  alt
                >
                <span class="xuan">全选</span>
              </div>
              <div class="bianji">
                <div class="close-right delate" @click="getdelate">删除</div>
                <div class="close-right">加入收藏</div>
              </div>
            </div>
        </div>
    </div>
    <div class="cotainer" v-else>
        <div class="none">
          <div class="img-wrap">
            <i class="iconfont icon-gou_wu_che2"></i>
          </div>
          <p>购物车暂无商品</p>
        </div>
      </div>
      <div class="bottom"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skuIds: [],
      checkArr: [],
      result: [],
      results: [],
      judge: false,
      // firstQuantity:0
    };
  },
  methods: {
    Gotodetails(items){
      let skuid=items.skuId
      this.$router.push({path:'/details',query:{skuid:skuid}})
    },
    getShoppingCart() {
      let headers;
      if (this.$store.state.token) {
        headers = {
          token: this.$store.state.token,
          userId: this.$store.state.userInfo.id
        };
      } else {
        headers = {};
      }
      this.$http
        .get("https://web-gateway.newbeescm.com/b2b-app-web/getShoppingCart", {
          headers,
          params: {
            userId: this.$store.state.userInfo.id,
            merchantId: this.$store.state.merchantInfo.merchantId,
            siteId: this.$store.state.stationId,
            shopId: this.$store.state.storeId.storeId,
            provId: this.$store.state.merchantInfo.provinceId,
            cityId: this.$store.state.merchantInfo.cityId,
            countyId: this.$store.state.storeId.county,
            streetId: this.$store.state.storeId.town,
            storeId: this.$store.state.storeId.id
          }
        })
        .then(res => {
          if(res.data.status.statusCode===0){
            this.result = res.data.result;
            this.choice();
            this.$store.commit('setgood',res.data.result)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getCheckState(Check, skuId) {
      let headers;
      if (this.$store.state.token) {
        headers = {
          token: this.$store.state.token,
          userId: this.$store.state.userInfo.id
        };
      } else {
        headers = {};
      }
      let params = {
        userId: this.$store.state.userInfo.id,
        merchantId: this.$store.state.merchantInfo.merchantId,
        siteId: this.$store.state.stationId,
        shopId: this.$store.state.storeId.storeId,
        provId: this.$store.state.merchantInfo.provinceId,
        cityId: this.$store.state.merchantInfo.cityId,
        countyId: this.$store.state.storeId.county,
        streetId: this.$store.state.storeId.town,
        storeId: this.$store.state.storeId.id,
        isCheck: Check,
        skuIds: skuId
      };
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/modifyCheckState",
          {},
          {
            headers,
            params
          }
        )
        .then(res => {
          console.log(res);
          if (res.data.status.statusCode === 0) {
            this.result = res.data.result;
            this.choice();
            this.checkClick();
            this.$store.commit('setgood',res.data.result)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getdelate() {
      let headers;
      if (this.$store.state.token) {
        headers = {
          token: this.$store.state.token,
          userId: this.$store.state.userInfo.id
        };
      } else {
        headers = {};
      }
      let skuIds = [];
      for (let i = 0; i < this.result.validShoppingCartDealerVos.length; i++) {
        for (let j = 0;j <this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo.length;j++) {
          if (this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].choiceOrNo) {
                skuIds.push(this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j]
            );
          }
        }
      }
        let arr = skuIds[0];
      console.log(skuIds[0]);
      this.$http.post("https://web-gateway.newbeescm.com/b2b-app-web/delete",{},
          {
            headers,
            params: {
              userId: this.$store.state.userInfo.id,
              merchantId: this.$store.state.merchantInfo.merchantId,
              siteId: this.$store.state.stationId,
              shopId: this.$store.state.storeId.storeId,
              provId: this.$store.state.merchantInfo.provinceId,
              cityId: this.$store.state.merchantInfo.cityId,
              countyId: this.$store.state.storeId.county,
              streetId: this.$store.state.storeId.town,
              storeId: this.$store.state.storeId.id,
              skuId: arr.skuId
            }
          }
        )
        .then(res => {
          if (res.data.status.statusCode === 0) {
            this.result = res.data.result;
            this.$store.commit('setgood',res.data.result)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    choice() {
      let checkArr = [],
        init = true;
      for (let i = 0; i < this.result.validShoppingCartDealerVos.length; i++) {
        for (let j = 0;j <this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo.length;j++) {
          if (!this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].choiceOrNo) {
            init = false;
          }
        }
        checkArr.push(init);
      }
      console.log(checkArr);
      this.checkArr = checkArr;
    },
    checkClick() {
      let skuids = [];
      for (let i = 0; i < this.result.validShoppingCartDealerVos.length; i++) {
        let str = "";
        for (let j = 0;j <this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo.length;j++) {
          str +=this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo[j].skuId + ",";
        }
        skuids.push(str);
      }
      this.skuIds = skuids;
      console.log(this.skuIds);
    },
    chageDelate() {
      this.judge = !this.judge;
    },
    count(i, j) {
      console.log(i, j);
      console.log(
        this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0]
          .shoppingCartGoodsResponseVo[j]
      );
      let headers;
      if (this.$store.state.token) {
        headers = {
          token: this.$store.state.token,
          userId: this.$store.state.userInfo.id
        };
      } else {
        headers = {};
      }
      let ress = this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0]
        .shoppingCartGoodsResponseVo[j];
      ress.totalQuantity += 1;
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/modify",
          {
            choiceOrNo: ress.choiceOrNo,
            cityId: this.$store.state.merchantInfo.cityId,
            countyId: this.$store.state.storeId.county,
            dealerId: ress.dealerId,
            dealerOrgId: ress.dealerOrgId,
            firstQuantity: ress.totalQuantity,
            firstUnit: ress.firstUnit,
            merchantId: this.$store.state.merchantInfo.merchantId,
            provId: this.$store.state.merchantInfo.provinceId,
            secondQuantity: 0,
            secondUnit: ress.secondUnit,
            shopId: this.$store.state.storeId.storeId,
            siteId: this.$store.state.stationId,
            skuId: ress.skuId,
            storeId: this.$store.state.storeId.id,
            streetId: this.$store.state.storeId.town,
            thirdQuantity: 0,
            thirdUnit: ress.thirdUnit,
            userId: this.$store.state.userInfo.id
          },
          {
            headers
          }
        )
        .then(res => {
          if (res.data.status.statusCode === 0) {
            this.result = res.data.result;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    counts(i, j) {
      console.log(i, j);
      console.log(
        this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0]
          .shoppingCartGoodsResponseVo[j]
      );
      let headers;
      if (this.$store.state.token) {
        headers = {
          token: this.$store.state.token,
          userId: this.$store.state.userInfo.id
        };
      } else {
        headers = {};
      }
      let ress = this.result.validShoppingCartDealerVos[i].groupGoodsVoList[0]
        .shoppingCartGoodsResponseVo[j];
      ress.totalQuantity -= 1;
      if (ress.totalQuantity <= 0) {
        ress.totalQuantity = 0;
      }
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/modify",
          {
            choiceOrNo: ress.choiceOrNo,
            cityId: this.$store.state.merchantInfo.cityId,
            countyId: this.$store.state.storeId.county,
            dealerId: ress.dealerId,
            dealerOrgId: ress.dealerOrgId,
            firstQuantity: ress.totalQuantity,
            firstUnit: ress.firstUnit,
            merchantId: this.$store.state.merchantInfo.merchantId,
            provId: this.$store.state.merchantInfo.provinceId,
            secondQuantity: 0,
            secondUnit: ress.secondUnit,
            shopId: this.$store.state.storeId.storeId,
            siteId: this.$store.state.stationId,
            skuId: ress.skuId,
            storeId: this.$store.state.storeId.id,
            streetId: this.$store.state.storeId.town,
            thirdQuantity: 0,
            thirdUnit: ress.thirdUnit,
            userId: this.$store.state.userInfo.id
          },
          {
            headers
          }
        )
        .then(res => {
          if (res.data.status.statusCode === 0) {
            this.result = res.data.result;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    togo() {
      this.getconfirmOrder();
      this.$router.push("/confirmOrder");
    },
    getconfirmOrder() {
      let headers;
      if (this.$store.state.token) {
        headers = {
          token: this.$store.state.token,
          userId: this.$store.state.userInfo.id
        };
      } else {
        headers = {};
      }
      let re=this.result
      re.allSelect=this.checkAll,
      re.cityId=this.$store.state.merchantInfo.cityId,
      re.countyId=this.$store.state.storeId.county,
            // freightpol: true,
            // goodsCount: 1,
            // guestExclusiveFlag: true,
            // invalidShoppingCartDealerVos: [],
      re.isUseMutiCoupon=true,
      re.merchantId=this.$store.state.merchantInfo.merchantId,
      // re.noStockOrderGoodsVoList=[],
      re.provId=this.$store.state.merchantInfo.provinceId,
            // salesPlatformEnum: "FW_B2B",
            // salesTerminalEnum: "WECHAT",
            // savedAmount: "0.00",
      re.shopId=this.$store.state.storeId.storeId,
      re.shopName=this.$store.state.storeId.storePy,
      re.siteId=this.$store.state.stationId,
      re.storeId=this.$store.state.storeId.id,
      re.streetId=this.$store.state.storeId.town,
            // totalAmount: "1530.00",
      re.userId=this.$store.state.userInfo.id,
      this.$http
        .post(
          "https://web-gateway.newbeescm.com/b2b-app-web/confirmOrder",re,
          {
            headers
          }
        )
        .then(res => {
          console.log(res);
          if (res.data.status.statusCode === 0) {
            console.log(res)
            this.result = res.data.result;
            this.$store.commit('setOrder',res.data.result)
            
            
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.getShoppingCart();
  },
  computed: {
    checkAll() {
      for (let i = 0; i < this.checkArr.length; i++) {
        if (!this.checkArr[i]) {
          return false;
        }
      }
      return true;
    },
    clickAll() {
      return this.skuIds.join("");
    }
  },
  filters:{
    addZero(value){
            if(isNaN(Number(value))){
                return value
            }
            return Number(value).toFixed(2)
        }
  }
};
</script>
<style scoped lang="scss">
.header {
  height: 0.43rem;
  text-align: center;
  font-size: 0.18rem;
  color: #030303;
  line-height: 0.48rem;
  background: #ffffff;
  position: relative;
  .bian {
    position: absolute;
    right: 0.14rem;
    top: 0.14rem;
    color: #666;
    font-size: 0.14rem;
    line-height: 0.2rem;
  }
}
.cotainer{
  position: absolute;
  top: 0.43rem;
  bottom: 0.49rem;
  left: 0;
  background: #f2f1f6;
  width: 100%;
  .none{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1.6rem;
    .img-wrap{
      width: 0.6rem;
      height: 0.6rem;
      background: #F2BEBE;
      border-radius: 50%;
      text-align: center;
      line-height: 0.6rem;
      .icon-gou_wu_che2{
        color: #fff;
        font-size: 0.2rem;
      }
    }
    p{
      font-size: 0.12rem;
      color: #999;
      margin-top: 0.14rem;
    }
  }
}
.header-1 {
  padding: 0 0.14rem;
  height: 0.4rem;
  background: #f8f8f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header-1-left {
    display: flex;
    .circle {
      width: 0.18rem;
      height: 0.18rem;
    }
    .company {
      margin-left: 0.14rem;
      span {
        font-size: 0.14rem;
        color: #333;
      }
      .icon-right {
        font-size: 0.16rem;
        color: #999;
      }
    }
  }
  .coupon {
    font-size: 0.14rem;
    color: #333;
  }
}
.store {
  padding: 0 0.14rem;
  height: 0.46rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .store-left {
    display: flex;
    .zeng {
      // width: 0.53rem;
      // height: 0.16rem;
      padding: 0.02rem 0.03rem;
      background: #dd3333;
      border-radius: 2px;
      text-align: center;
      line-height: 0.14rem;
      font-size: 0.12rem;
      color: #fff;
    }
    p {
      font-size: 0.12rem;
      color: #666;
      width: 2.24rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 0.09rem;
    }
  }
  .store-right {
    span {
      font-size: 0.12rem;
      color: #dd3333;
    }
    .icon-right {
      font-size: 0.12rem;
      color: #dd3333;
    }
  }
}
.stores {
  padding: 0.11rem 0.14rem 0.05rem 0.14rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .store-left {
    display: flex;
    .zeng {
      // width: 0.53rem;
      // height: 0.16rem;
      padding: 0.02rem 0.03rem;
      background: #dd3333;
      border-radius: 2px;
      text-align: center;
      line-height: 0.14rem;
      font-size: 0.12rem;
      color: #fff;
    }
    p {
      font-size: 0.12rem;
      color: #666;
      width: 2.24rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: 0.09rem;
    }
  }
  .store-right {
    span {
      font-size: 0.12rem;
      color: #dd3333;
    }
    .icon-right {
      font-size: 0.12rem;
      color: #dd3333;
    }
  }
}
.store::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.15rem;
  // right: 0.14rem;
  width: 96%;
  height: 1px;
  background: #f2f1f6;
  transform: scale(1, 0.5);
}
.goods-list {
  padding: 0 0.14rem;
  position: relative;
  li {
    display: flex;
    align-items: center;
    padding: 0.1rem 0;
    .goods-left {
      img {
        width: 0.16rem;
        height: 0.16rem;
      }
    }
    .goods-center {
      width: 1rem;
      height: 1rem;
      // background: pink;
      margin-left: 0.1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .goods-right {
      flex: 1;
      padding-left: 0.09rem;
      p {
        font-size: 0.14rem;
        color: #333;
      }
      span {
        font-size: 0.12rem;
        color: #999;
      }
      .right-money {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        .money {
          display: flex;
          align-items: center;
          color: #dd3333;
          font-size: 0.14rem;
          span {
            font-size: 0.18rem;
            color: #dd3333;
          }
          .sss {
            font-size: 0.1rem;
            color: #999;
            text-decoration: line-through;
            line-height: 0.18rem;
          }
        }
        .number {
          font-size: 0.12rem;
          .num {
            color: #dd3333;
          }
          .zi {
            color: #999;
          }
        }
      }
      .right-bottom {
        display: flex;
        justify-content: space-between;
        p {
          padding: 0.05rem;
          font-size: 0.14rem;
          line-height: 0.14rem;
          color: #fff;
          background: #dd3333;
          border-radius: 2px;
        }
        .da {
          background: #fff;
          color: #333;
          border: 1px solid #999;
        }
        .btn {
          display: flex;
          button {
            width: 0.26rem;
            height: 0.26rem;
          }
          .btn-z {
            width: 0.54rem;
            height: 0.24rem;
            opacity: 0.99;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            text-align: center;
            line-height: 0.24rem;
          }
        }
      }
    }
  }
}
.goods-list::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  // right: 0.14rem;
  width: 100%;
  height: 1px;
  background: #f2f1f6;
  transform: scale(1, 0.5);
}
.gross {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 0.5rem;
  .gross-top {
    color: #333;
    font-weight: bold;
  }
  .gross-bottom {
    font-size: 0.12rem;
    color: #dd3333;
  }
}
.close {
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0.14rem;
  position: fixed;
  left: 0;
  bottom: 0.49rem;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 0 #e1e1e1;
  box-sizing: border-box;
  border-top: 1px solid #e1e1e1;
  .close-left {
    display: flex;
    align-items: center;
    img {
      width: 0.16rem;
      height: 0.16rem;
      vertical-align: middle;
    }
    .xuan {
      color: #666;
      font-size: 0.14rem;
      margin-left: 0.09rem;
    }
    .add {
      margin-left: 0.11rem;
      .add-sp {
        color: #333;
      }
      p {
        font-size: 0.1rem;
        color: #333;
      }
    }
  }
  .bianji {
    display: flex;
    .delate {
      background: #999;
    }
  }
  .close-right {
    width: 1.2rem;
    background: #dd3333;
    font-size: 0.16rem;
    color: #fff;
    height: 0.5rem;
    text-align: center;
    line-height: 0.5rem;
  }
  .qipei{
    background: #999;
  }
}
.bottom {
  height: 1rem;
}
</style>
